<template>
  <div v-html="processedHtml" :class="customClass"></div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  customClass: {
    type: String,
    default: ''
  }
})

const processedHtml = computed(() => {
  if (!props.content) return ''
  
  // 解码HTML实体
  const decodeHtml = (html) => {
    const txt = document.createElement('textarea')
    txt.innerHTML = html
    return txt.value
  }
  
  // 处理常见的HTML实体和标签
  let processed = decodeHtml(props.content)
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&amp;/g, '&')
    .replace(/&quot;/g, '"')
    .replace(/&#39;/g, "'")
    .replace(/\\n/g, '<br>')
    .replace(/\\r\\n/g, '<br>')
    .replace(/\\r/g, '<br>')
  
  // 确保段落标签正确
  if (processed.includes('<p>') || processed.includes('<div>')) {
    // 如果已经有段落标签，直接返回
    return processed
  } else {
    // 如果没有段落标签，将换行符转换为段落
    const paragraphs = processed.split('<br>').filter(p => p.trim())
    if (paragraphs.length > 1) {
      return paragraphs.map(p => `<p>${p.trim()}</p>`).join('')
    } else {
      return processed
    }
  }
})
</script>

<style scoped>
/* 可以添加自定义样式 */
</style> 